 import { useState, useEffect } from "react"

function Header() {
  const [count, setCount] = useState(0)

  useEffect(() => {
    // 这里的函数写正常的副作用函数
    return () => {
      // 返回的函数里面写一些清除事件 或者 定时器等等操作， 类似与vue2 destroy
      console.log('组件卸载了，类似与类组件的componentWillUnmount');
    }
  }, [])

  return (
    <>
      <h3>状态变量：{count}</h3>
      <button onClick={() => setCount(count + 1) }>修改数据count</button>
    </>
  )
}

function App() {
  const [mes, setMes] = useState(5)
  return (
    <>
      <div>
       {mes > 2 ? (<Header />) : (<div>header组件销毁了</div>) }
      </div>
      <button onClick={() => setMes(mes - 1)}>msg的值{mes}</button>
    </>
  )
}

export default App